<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>股票走势图</title>
  <script src="./js/echarts.min.js"></script>
</head>

<body>
  <div style="width:600px;height:400px;border:1px solid #333;"></div>
</body>
<script>
  let myChart = echarts.init(document.querySelector("div"))
  let myData = [
    [22, 39, 10, 48],
    [40, 35, 30, 50],
    [31, 38, 33, 44],
    [38, 15, 5, 42]
  ]
  let option = {
    xAxis: {
      type: "category",
      data: ["星期一", "星期二", "星期三", "星期四"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        type: "candlestick",
        data: myData,
        itemStyle: {
          color: "red",
          color0: "green",
          borderColor: "red",
          borderWidth: 1,
          borderColor0: "green",
          shadowBlur: 10,
          shadowColor: "red"
        },
        //高亮显示
        emphasis: {
          disabled: false,
          focus: "self",
          itemStyle: {
            color: "green"
          }
        },
        markPoint: {
          data: [
            { name: "最大值", type: "max", valueDim: "highest" },
            { name: "最小值", type: "min", valueDim: "lowest" },
          ]
        }
      },
      {
        type: "line",
        smooth: true,
        data: myData.map(item => item[3])
      }
    ]
  }
  myChart.setOption(option)

</script>

</html>